<template>
  <div class="app-container">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item name="1">
        <template slot="title">
          <i class="el-icon-search" />搜索栏
        </template>
        <div class="head-container">
          <el-form class="searchform" :model="param" :inline="true" size="mini" label-width="auto" @keyup.enter.native="toQuery">
            <el-form-item label="规则编号">
              <el-input v-model="param.id" placeholder="输入" clearable style="width: 160px;" />
            </el-form-item>
            <el-form-item label="规则业务类">
              <el-select v-model="param.applyType" placeholder="请选择" style="width: 160px;" clearable>
                <el-option v-for="item in ruleApplyTypes" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="表单名称">
              <el-select v-model="param.sheetVariableName" placeholder="请选择" style="width: 160px;" clearable>
                <el-option v-for="item in sheetNames" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="Excel列号">
              <el-input v-model="param.columnIndex" placeholder="请输入" clearable style="width: 160px;" />
            </el-form-item>
            <el-form-item label="Excel列名">
              <el-input v-model="param.columnName" placeholder="请输入" clearable style="width: 160px;" />
            </el-form-item>
            <el-form-item label="实现方式">
              <el-select v-model="param.implType" placeholder="请选择" style="width: 160px;" clearable>
                <el-option v-for="item in getSelector().implTypes" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="规则状态">
              <el-select v-model="param.ruleStatus" placeholder="请选择" style="width: 160px;" clearable>
                <el-option v-for="item in getSelector().ruleStatuses" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" type="primary" style="float:right;margin-left:0px;" icon="el-icon-refresh" round @click="resetForm">重置</el-button>
              <el-button size="mini" type="primary" style="float:right;margin-left:0px;" icon="el-icon-search" round @click="toQuery">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-collapse-item>
    </el-collapse>
    <div style="padding-top:5px">
      <el-button size="mini" type="danger" style="float:right;margin-bottom:5px;margin-right:0px;" icon="el-icon-remove" round @click="batchDelete">删除</el-button>
      <el-button size="mini" type="success" style="float:right;margin-bottom:5px;margin-right:0px;" round icon="el-icon-circle-plus" @click="toAddRule">新增</el-button>
      <el-table
        ref="ruleTable"
        :data="data"
        :row-key="getRowKeys"
        stripe
        size="small"
        :height="tableHeight"
        border
        style="width: 100%;"
        @row-click="rowClick"
        @sort-change="sortChange"
        @selection-change="handleSelectionChange"
        @header-dragend="colChange"
      >
        <el-table-column :reserve-selection="true" type="selection" align="center" width="55" />
        <el-table-column :show-overflow-tooltip="true" label="规则编号" prop="id" fixed="left" :width="colWidths.id" />
        <el-table-column :show-overflow-tooltip="true" label="规则业务类" prop="applyType" :width="colWidths.applyType">
          <template slot-scope="scope">
            <span>{{ businessType(ruleApplyTypes, scope.row.businessTypeIds) }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="表单名称" prop="sheetVariableName" :width="colWidths.sheetVariableName">
          <template slot-scope="scope">
            <span>{{ showNameByValue(scope.row.sheetVariableName, sheetNames) }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="Excel列号" prop="columnIndex" :width="colWidths.columnIndex" />
        <el-table-column :show-overflow-tooltip="true" label="Excel列名" prop="columnName" :width="colWidths.columnName" />
        <el-table-column :show-overflow-tooltip="true" label="规则描述" prop="ruleDesc" :width="colWidths.ruleDesc" />
        <el-table-column :show-overflow-tooltip="true" label="生效日期" prop="effectiveDate" :width="colWidths.effectiveDate">
          <template slot-scope="scope">
            <span>{{ parseToString(scope.row.effectiveDate, 'yyyy-MM-dd') }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="失效日期" prop="expirationDate" :width="colWidths.expirationDate">
          <template slot-scope="scope">
            <span>{{ parseToString(scope.row.expirationDate, 'yyyy-MM-dd') }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="实现方式" prop="implType" :width="colWidths.implType">
          <template slot-scope="scope">
            <span>{{ showNameByValue(scope.row.implType, getSelector().implTypes) }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="规则状态" prop="ruleStatus" :width="colWidths.ruleStatus">
          <template slot-scope="scope">
            <span>{{ showNameByValue(scope.row.ruleStatus, getSelector().ruleStatuses) }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="创建人" prop="createdBy" :width="colWidths.createdBy" />
        <el-table-column :show-overflow-tooltip="true" label="更新人" prop="updatedBy" :width="colWidths.updatedBy" />
        <el-table-column :show-overflow-tooltip="true" label="创建时间" prop="createdTime" :width="colWidths.createdTime">
          <template slot-scope="scope">
            <span>{{ parseToString(scope.row.createdTime, 'yyyy-MM-dd HH:mm:ss') }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="更新时间" prop="updatedTime" :width="colWidths.updatedTime">
          <template slot-scope="scope">
            <span>{{ parseToString(scope.row.updatedTime, 'yyyy-MM-dd HH:mm:ss') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="operation" align="center" fixed="right" width="285">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" icon="el-icon-edit" round @click="toEditRule(scope.row)">修改</el-button>
            <el-button size="mini" type="warning" icon="el-icon-remove" round @click="deleRule(scope.row)">删除</el-button>
            <el-button size="mini" type="primary" round @click="toModifyLog(scope.row)">查看修改记录</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <el-pagination
        :total="total"
        :current-page.sync="currentPage"
        style="margin-top: 8px;"
        layout="total, prev, pager, next, sizes"
        @size-change="sizeChange"
        @current-change="pageChange"
      />
    </div>
    <rule ref="rule" :parent="curentObject" />
    <logList ref="logList" :parent="curentObject" />
  </div>
</template>

<script>
import initData from '@/api/rule3InitData'
import { findRule3ApplyTypes, findRuleSheetNames } from '@/api/rule3'
import { deleteRuleMaintenance, batchDeleteRuleMaintenance } from '@/api/rule-maintenance'
import { parseToString } from '@/utils/datefromat'
import { businessType } from '@/utils/ruleUtil'
import { showNameByValue } from '@/utils/selectUtil'
import { getSelector } from './js/edit'
import rule from './edit'
import logList from './log-list'
import { Message } from 'element-ui'

export default {
  components: { rule, logList },
  mixins: [initData],
  data() {
    return {
      syncTime: [],
      ids: [],
      curentObject: this,
      activeName: '1',
      ruleApplyTypes: [{ name: '', value: null }],
      sheetNames: [{ name: '', value: null }],
      tableHeight: window.innerHeight * 0.58
    }
  },
  watch: {
    data: {
      handler(n, o) {
        this.$nextTick(() => {
          this.doLayout()
        })
      }
    }
  },
  mounted() {
    window.addEventListener('resize', this.doLayout, true)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.doLayout, true)
  },
  created() {
    this.$nextTick(() => {
      this.init()
      this.loadApplyType()
      this.loadSheetNames()
    })
  },
  methods: {
    parseToString,
    businessType,
    showNameByValue,
    getSelector,
    doLayout() {
      if (this.$refs.ruleTable) {
        this.$refs.ruleTable.doLayout()
      }
    },
    beforeInit() {
      this.url = '/rules/ruleMaintenance/queryPage'
      this.param.pageNum = this.page
      this.param.pageSize = this.size
      return true
    },
    loadApplyType() {
      var _this = this
      findRule3ApplyTypes().then(res => {
        _this.ruleApplyTypes = res.result
      })
    },
    loadSheetNames() {
      var _this = this
      findRuleSheetNames().then(res => {
        _this.sheetNames = res.result
      })
    },
    rowClick(row) {
      this.$refs.ruleTable.clearSelection(this.multipleSelection)
      this.$refs.ruleTable.toggleRowSelection(row, true)
    },
    // 列表排序触发
    sortChange(val) {
      const sortCol = val.prop.replace(/([A-Z])/g, '_$1').toUpperCase()
      let sortType = ''
      if (val.order === 'descending') {
        sortType = ' DESC'
      } else if (val.order === 'ascending') {
        sortType = ' ASC'
      }
      this.param.sort = sortCol + sortType
      this.init()
    },
    // 查询
    toQuery() {
      this.page = 0
      this.currentPage = 1
      this.init()
    },
    // 新增规则
    toAddRule(rule) {
      const edit = this.$refs.rule
      edit.titleContext = '新增'
      edit.dialog = true
    },
    // 编辑规则
    toEditRule(rule) {
      const edit = this.$refs.rule
      edit.titleContext = '修改'
      var json = JSON.stringify(rule)
      var copy = JSON.parse(json)
      edit.rule = copy
      edit.dialog = true
    },
    toModifyLog(rule) {
      const logList = this.$refs.logList
      logList.param.ruleId = rule.id
      logList.dialog = true
      logList.init()
    },
    // 查询栏重置触发
    resetForm() {
      this.param = {}
    },
    // 列表多选框触发
    handleSelectionChange(val) {
      this.ids = []
      val.forEach(item => {
        this.ids.push(item.id)
      })
    },
    // 翻页选择row的key值
    getRowKeys(row) {
      return row.id
    },
    deleRule(rule) {
      var _this = this
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteRuleMaintenance(rule.id).then(res => {
          Message({
            message: res.result,
            type: 'success',
            duration: 2 * 1000
          })
          _this.toQuery()
        }, err => {
          console.log(err)
        })
      })
    },
    // 批量删除
    batchDelete() {
      if (this.ids.length <= 0) {
        Message({
          message: '请选择删除项!',
          type: 'warning',
          duration: 2 * 1000
        })
        return
      }
      var _this = this
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        batchDeleteRuleMaintenance(_this.ids).then(res => {
          Message({
            message: res.result,
            type: 'success',
            duration: 2 * 1000
          })
          _this.toQuery()
        })
      })
    }
  }
}
</script>
